<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>书影音</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
    <script src="./fonts/iconfont.js"></script>
</head>
    <style>
          .icon {
         width: 1em;
        height: 1em;
        vertical-align: -0.15em;
         fill: currentColor;
        overflow: hidden;
        background-color: transparent; /* 确保背景透明 */ 
 
    }
    .icon:active{/* 点击效果 */
        color: green;
    }

   ul{
        padding: 0;
        margin: 0;
        list-style: none;
   }
   ul,p,body{
       padding: 0;
       margin: 0;
   }
   .bnav{
    /* 固定在下面 */
       position: fixed;
       left: 0;
       bottom: 0;
       width: 100%;
       z-index: 9;
       background-color: #ffffff;
       border-top: 0.2vw solid #eee;
   }
   body{
    margin-bottom: 50vw
   }
   .bnav>ul{
    display: flex;
   }
   .bnav li{
    width: 20%;
    display: flex;
    justify-content: center;/* 设置容器属性 */
   }
   .bnav div{
    position: relative;
   }
   .bnav svg{
     font-size: 5vw;
     margin: 3px 0;
   }
   .bnav p{
    font-size: 14px;
    margin: 3px 0; 
    text-align: center;
    color: #746d6d;
   }
   .bnav p:active{
    color: green;
   }

/* 搜索框 ************************************/
   #header{
            position: fixed;
            display: flex;
            background-color: #fff;
            padding: 6px 60px;/* 搜索框距离 */
            
        }
        .search{
            background-color: #eee;
            border-radius: 15px;
            flex-grow: 1;
            display: flex;
            align-items: center;
        }
        .search>span{
            font-size: 14px;
            margin: 0px 8px;
       
        }
        #search{/* 搜索框里 ************************************/
            flex-grow: 2;
            border: none;
            outline: none;/* 轮廓 */
            margin-right: 20px;
            height: 7vw;
            background-color: #eee;
            text-align: center;
        }
        .btn{
            margin-left: 8px;
            text-align: center;
 
        }
   
        .bnav1{
    /* 上面两个图案************************************/
       position: fixed;
       left: 20px;
       top: 7px;
       width: 100%;
       z-index: 9;
       font-size: 25px;
   }
   .bnav2{
    /* 上面两个图案 ************************************/
    position: fixed;  
  top: 7px;  
  right: 28px;  
  width: auto;  
  height: auto;  
  max-width: 50px;  
  max-height: 50px;  
  font-size: 25px;
  background-color: #fff;
}

#p1{
    position: relative;
    top: 13vw;
    font-size: 4vw;
    margin-left: 7vw;
    border-bottom: 3px solid #746d6d;

}
#p2,#p3,#p4,#p5,#p6{
    font-size: 4vw;
    position: relative;
    top: 13vw;
    margin-left: 5vw;
    color:rgb(146, 142, 142);
    line-height: 2.5;
}
#box{
    margin-top: 11vw;
    border-bottom: 1px solid #eee;
}
    .icon1{
        width: 5vw;
        height: 5vw;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        background-color: transparent;
        margin-left: 14vw;
        margin-top: 10vw;
    }
    #box1{
        border: 2px solid #eee;
        width: 17vw;
        height: 14vw;
        margin-top: -10vw;
        margin-left: 6vw;
        border-radius: 13px;
        text-align: bottom;
        font-size: 3vw;
        display: flex;
        align-items: flex-end;  
        justify-content: center;  
        color: rgb(146, 142, 142);
    }
    #box2{
        border: 2px solid #eee;
        width: 16vw;
        height: 14vw;
        margin-top: -14vw;
        margin-left: 26vw;
        border-radius: 13px;
        text-align: bottom;
        font-size: 3vw;
        display: flex;
        align-items: flex-end;  
        justify-content: center;  
        color: rgb(146, 142, 142);
    }
    #box3{
        border: 2px solid #eee;
        width: 16vw;
        height: 14vw;
        margin-top: -15vw;
        margin-left: 45vw;
        border-radius: 13px;
        text-align: bottom;
        font-size: 3vw;
        display: flex;
        align-items: flex-end;  
        justify-content: center;  
        color: rgb(146, 142, 142);
    }
    #box4{
        border: 2px solid #eee;
        width: 16vw;
        height: 14vw;
        margin-top: -15vw;
        margin-left: 65vw;
        border-radius: 13px;
        text-align: bottom;
        font-size: 3vw;
        display: flex;
        align-items: flex-end;  
        justify-content: center;  
        color: rgb(146, 142, 142);
    }
    .tit1{
        position: relative;
        top: 8vw;
        left: 5vw;
        font-size: 5vw;
    }
    .tit2{
        position: relative;
        top: 8vw;
        left: 10vw;
        color:rgb(146, 142, 142);
        font-size: 5vw;
    }
    .tit3{
        font-size: 3vw;
        position: relative;
        top: 8vw;
        left: 35vw;
    }


   

    body {
        background-color: transparent;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
      top: 12vw;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background-color: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #box-1 {
        margin-top: 20vw;
        border: 2px solid rgba(174, 170, 170, 0.452);
        width: 40vw;
        height: 35vw;
        margin-left: 5vw;
        border-radius: 13px;
    }
    #box-1 #p-1{
        position: relative;
        margin-left: 4vw;
        margin-top: 3vw;
        font-size: 4vw;
    }
    #box-1 #p-2{
        position: relative;
        margin-left: 4vw;
        font-size: 3vw;
        color:rgb(146, 142, 142);
        margin-top: 3vw;
    }
    #box-1 img{
        position: relative;
       top: -20vw;
       left: 20vw;
       width: 45%;
    }
    #box-2 {
        margin-top: -35vw;
        border: 2px solid rgba(174, 170, 170, 0.452);
        width: 40vw;
        height: 32vw;
        margin-left: 50vw;
        border-radius: 13px;
    }
    #box2 a{
        color: #746d6d;
    }
    #box-2 #p-3{
        position: relative;
        margin-left: 4vw;
        margin-top: 3vw;
        font-size: 4vw;
    }
    #box-2 #p-4{
        position: relative;
        margin-left: 4vw;
        font-size: 3vw;
        color:rgb(146, 142, 142);
        margin-top: 5vw;
    }
    #box-2 img{
        position: relative;
       top: -18vw;
       left: 22vw;
       width: 40%;
    }
    #G img{
        width: 90%;
        margin-top: 14vw;
        margin-left: 3vw;
    }
    </style>



<body>
         <nav class="bnav">
        <ul>
            <li>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye-tianchong"></use>
                    </svg>
                    <p>首页</p>
                    <span class="dot"></span>
                </div>
                <li>
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-24gl-bookmarks2"></use>
                        </svg>
                        <p>书影音</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-hongwai"></use>
                        </svg>
                        <p>小组</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shangpu"></use>
                        </svg>
                        <p>市集</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wode1"></use>
                        </svg>
                        <p>我</p>
                    </div>
                </li>
            </li>
        </ul>
    </nav>
    <!-- 搜索框 -->
    <header id="header">
        <div class="search">
            <span class="iconfont icon-sousuo"></span>
            <input type="text" name="search" id="search" placeholder="输入后自动消失">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo1-copy"></use>
            </svg>
        </div>
        <div class="btn">
            <span class="iconfont icon-bofang"></span>
        </div>
    </header>
    <nav class="bnav1">  
        <ul>
            <li>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caidan-copy"></use>
                    </svg>
                </div>
            </li>
            
        </ul>
    </nav>
    <nav class="bnav2">  
        <ul>
            <li>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-envelope"></use>
                    </svg>
                </div>
            </li>
            
        </ul>
    </nav>

</li>
<span id="p1">电影</span>  
 <span id="p2">电视</span> 
 <span id="p3">读书</span>  
 <span id="p4">连载</span> 
 <span id="p5">音乐</span>   
 <span id="p6">同城</span>  
 <li>
    <div id="box"></div> 
    <nav id="bnav1">  
        <ul>
            <li>
                <div>
                    <svg class="icon1" aria-hidden="true">
                        <use xlink:href="#icon-caidan-copy"></use>
                    </svg>
                    
                    <svg class="icon1" aria-hidden="true">
                        <use xlink:href="#icon-caidan-copy"></use>
                    </svg>
                    <svg class="icon1" aria-hidden="true">
                        <use xlink:href="#icon-caidan-copy"></use>
                    </svg>
                    <svg class="icon1" aria-hidden="true">
                        <use xlink:href="#icon-caidan-copy"></use>
                    </svg>
                </div>
               
            </li>
             
        </ul>
        <div id="box1">
                <h7>找电影</h7> 
             </div>
             <div id="box2">
                <a href="6-list.html">豆瓣榜单</a> 
             </div>
             <div id="box3">
                <h7>即将上映</h7> 
             </div>
             <div id="box4">
                <h7>豆瓣片单</h7> 
             </div>
    </nav>
    <span class="tit1"><strong>影院热映</strong></span> 
    <span class="tit2">|豆瓣热门</span>
    <span class="tit3">全部50></span>
    <main>
         <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./images/书影音1.jpg"></div>
      <div class="swiper-slide"><img src="./images/书影音2.jpg"></div>
      <div class="swiper-slide"><img src="./images/书影音3.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
    </main>
    <div id="box-1">
        <p id="p-1"><strong>国内即将上<br>映</strong></p>
        <p id="p-2">近期有14<br>部<br>热门电影</p>
       <img src="./images/书影音4.jpg" >
    </div>
    <div id="box-2">
        <p id="p-3"><strong>全球值得期<br>待</strong></p>
        <p id="p-4">近期有7部<br>热门电影</p>
       <img src="./images/书影音5.jpg">
    </div>
    <footer>
        <div id="G">
        <img src="./images/书影音6.jpg">
        </div>
    </footer>
      <!-- Swiper JS -->
  <script src="./swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
        dynamicBullets: true,
      },
    });
  </script>
 </body>
    </html>
    